<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>sweetalert插件的基本使用</title>
        <!-- <link rel="stylesheet" href="css/sweetalert2.min.css" /> -->
        <link rel="stylesheet" href="css/sweetalert.css" />
    </head>
    <body>
        <h1>sweetalert插件的基本使用</h1>
        <button id="success">成功success</button>
        <button id="warning">警告warning</button>
        <button id="error">错误error</button>
        <button id="info">信息info</button>
        <button id="swalHtml">html转成内容</button>
        <button id="swalCallback">测试swal输入框、回调</button>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="js/sweetalert2.min.js"></script> -->
        <script src="js/sweetalert.min.js"></script>
        <script>
            $(function(){
                // 基本使用
                // swal("Here's a message!");
                // 有标题有内容
                // swal("Here's a message!", "It's pretty, isn't it?")
                // 一个成功消息的弹窗
                // swal("Good job!", "You clicked the button!", "success")
                // 一个警告消息，其功能附加到“确认”按钮的弹窗-错
                // swal({
                //       title: "Are you sure?",
                //       text: "You will not be able to recover this imaginary file!",
                //       type: "warning",
                //       showCancelButton: true,
                //       confirmButtonColor: "#DD6B55",
                //       confirmButtonText: "Yes, delete it!",
                //       closeOnConfirm: false
                //     },
                //     function(){
                //       swal("Deleted!", "Your imaginary file has been deleted.", "success");
                //     });
                // })
            // 并通过传递一个参数，你可以执行别的“取消”-错
            // swal({
            //   title: "Are you sure?",
            //   text: "You will not be able to recover this imaginary file!",
            //   type: "warning",
            //   showCancelButton: true,
            //   confirmButtonColor: "#DD6B55",
            //   confirmButtonText: "Yes, delete it!",
            //   cancelButtonText: "No, cancel plx!",
            //   closeOnConfirm: false,
            //   closeOnCancel: false
            // },
            // function(isConfirm){
            //   if (isConfirm) {
            //     swal("Deleted!", "Your imaginary file has been deleted.", "success");
            //   } else {
            //     swal("Cancelled", "Your imaginary file is safe :)", "error");
            //   }
            // });
            // 带有自定义图标
            // swal({
            //   title: "Sweet!",
            //   text: "Here's a custom image.",
            //   imageUrl: "../img/tourism1.png"
            // });
            // 自定义HTML消息
            // swal({
            //   title:"HTML <small>Title</small>!",
            //   text: 'A custom <span style="color:#F8BB86">html<span> message.',
            //   html: true
            // });
            // 带有自动关闭计时器的消息的弹窗
            // swal({
            //   title: "Auto close alert!",
            //   text: "I will close in 2 seconds.",
            //   timer: 2000,
            //   showConfirmButton: false
            // });
            // 替换“提示”功能
            // swal({
            //   title: "An input!",
            //   text: "Write something interesting:",
            //   type: "input",
            //   showCancelButton: true,
            //   closeOnConfirm: false,
            //   animation: "slide-from-top",
            //   inputPlaceholder: "Write something"
            // },
            // function(inputValue){
            //   if (inputValue === false) return false;
              
            //   if (inputValue === "") {
            //     swal.showInputError("You need to write something!");
            //     return false
            //   }
              
            //   swal("Nice!", "You wrote: " + inputValue, "success");
            // });
            // 使用加载器（例如AJAX请求）
            // swal({
            //   title: "Ajax request example",
            //   text: "Submit to run ajax request",
            //   type: "info",
            //   showCancelButton: true,
            //   closeOnConfirm: false,
            //   showLoaderOnConfirm: true,
            // },
            // function(){
            //   setTimeout(function(){
            //     swal("Ajax request finished!");
            //   }, 2000);
            // });
            $("#success").click(function(){
                swal('Nice!','Good job!','success');
            });
            $("#error").click(function(){
                // swal('OMG!','You are miserable!','error');
                // swal('OMG!','You are wrong!','error');
                swal({
                    title:'OMG',
                    text:"you are wrong!",
                    type:'error'
                })
            });
            $("#info").click(function(){
                swal({
                    title:'提示',
                    text:"这是你今天要完成的工作!",
                    type:'info'
                })
            });
            $("#warning").click(function(){
                swal({
                    title:'警告',
                    text:"你今天工作还有两项未完成!",
                    // type:'warning',
                    allowEscapeKey:true,
                    allowOutsideClick:true,//点击模态框外，关闭模态框
                    showCancelButton:true,//显示取消按钮
                    showConfirmButton:true,
                    confirmButtonText:'确定',
                    confirmButtonColor:'#f00',
                    cancelButtonText:'取消',
                    cancelButtonColor:'#00f',
                    closeOnConfirm:false,
                    closeOnCancel:false,
                    imageUrl:'../img/tourism1.png',
                    imageSize:'100x100',
                    html:true,//将html标签转化成网页内容
                    animation:true,
                    inputType:'text',//使用type：“input”时更改输入字段的类型（如果您希望用户输入其密码，这将非常有用）
                    inputPlaceholder:'请输入密码',
                    inputValue:'你的密码',
                    showLoaderOnConfirm:true
                    // timer:3000,//动态弹出框自动关闭计时器
                },function(isConfirm){
                    console.log("isConfirm",isConfirm)
                    if(isConfirm){
                        swal({
                            title:'你点击的是确认按钮',
                            type:'info',
                            timer:1000,
                            showCancelButton:false,
                            showConfirmButton:false
                        })
                        // swal('你点击的是确认按钮','','success');
                    }else{
                        // swal('你点击的是取消按钮','','success');
                    }
                })
            });
            $("#swalHtml").click(function() {
                swal({
                    title: "Good!",
                    text: '自定义<span style="color:red">图片</span>、<a href="#">HTML内容</a>。<br/>5秒后自动关闭。',
                    imageUrl: "../img/tourism1.png",
                    imageSize:"100x100",
                    html: true,
                    timer: 5000,
                    showConfirmButton: false
                });
            });

            $("#swalCallback").click(function() {
                swal({
                    title: "输入框来了",
                    text: "这里可以输入并确认:",
                    type: "input",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    animation: "slide-from-top",
                    inputPlaceholder: "填点东西到这里面吧"
                }, function(inputValue) {
                    if (inputValue === false)
                        return false;
                    if (inputValue === "") {
                        swal.showInputError("请输入!");
                        return false
                    }
                    swal("棒极了!", "您填写的是: " + inputValue, "success");
                });
            });
        });
        </script>
    </body>
</html>